import React, { Component } from 'react'
import axios from 'axios'

import MySwipe from './MySwipe'
import IMG from '../images/banner.jpg'
// import Swiper from 'swiper'

export default class MyBanner extends Component {
  state = {
    banner: [],
    imgs: [
      { url: IMG },
      { url: IMG },
      { url: IMG },
      { url: IMG },
    ],
    options: {
      effect: 'cube',
      cubeEffect: {
        slideShadows: true,
        shadow: true,
        shadowOffset: 100,
        shadowScale: 0.6
      },
      effect: 'fade',
      fadeEffect: {
        crossFade: true,
      },
      loop: true,
      time: 2400,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
    }
  }


  getBannersData = async () => {
    const res = await axios.get('http://81.69.235.62:3000/app/banners')
    if (res.data.code === 200) {
      this.setState({
        banner: res.data.result
      })
    }
  }

  componentDidMount() {
    this.getBannersData()
  }


  render() {
    const { options } = this.state
    return (
      <div>
        <h3>React 封装轮播图</h3>

        <MySwipe options={options}>
          {
            this.state.imgs.map((item, index) => {
              return (
                <MySwipe.Item key={index}>
                  <img src={item.url} style={{ width: '100%', height: 300 }} alt='' />
                </MySwipe.Item>
              )
            })
          }
        </MySwipe>
        <br />
        <MySwipe options={options} id='btwo'>
          {
            this.state.banner.map((item, index) => {
              return (
                <MySwipe.Item key={index}>
                  <img src={item.imgurl.replace(/public/, 'http://81.69.235.62:3000')} alt="" style={{ width: '100%', height: 300 }} />
                </MySwipe.Item>
              )
            })
          }
        </MySwipe>
      </div>
    )
  }
}
